<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>


    <div class="dishitem active">
      <div class="value">
       <span class="content">常温a</span>
      </div>
      <div class="money">
        <span class="content">￥322</span>
      </div>
    </div>


   <DivItem value="少冰" :money="1" :active="true"></DivItem>


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import DivItem from '@/components/DivItem/index.vue'

export default {
  name: 'Dashboard',
  components: {
    DivItem
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dishitem{
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #c1c3d0;
  margin-right: 10px;
}

.dishitem .value{
  float: left;
}

.dishitem .money{
  float: left;
  border-left: 1px solid #c1c3d0;
  color: #db6159;
}

.dishitem .content{
  padding: 10px;
  display: inline-block;
}

.dishitem.active{
  background-color: #fffbf0;
   border: 1px solid #e6b63c;
}

.dishitem.active .value{
  color: #e6b63c;
}
.dishitem.active .money{
  float: left;
  border-left: 1px solid #e6b63c;
}
</style>
